<script setup lang="ts">
import type { CascaderDiff } from '@/components/Cascader'
// import type { FilterItem } from '@/components/business/src/StrongSearch'
import StatusTips from './StatusTips.vue'

interface IEmit {
  (event: 'update:viewType', value: 'grid' | 'list'): void
  (event: 'fullscreen'): void
  (event: 'saveConfig'): void
  (event: 'errorClick'): void
  (event: 'warningClick'): void
}

interface IProps {
  error?: number
  warning?: number
  diff: CascaderDiff[]
}

const props = withDefaults(defineProps<IProps>(), {
  diff: () => [],
})

// defineProps<IProps>()

const emit = defineEmits<IEmit>()

const isShowOperationActionCard = computed(() => {
  const tipDiff = props.diff.filter(item => item.diffType !== 'SORT').length
  return tipDiff === 0
})
</script>

<template>
  <div
    class="operation-bar"
    :style="{
      justifyContent: 'space-between',
    }"
  >
    <div class="operation-bar__left flex-1 justify-between">
      <a-button
        type="outline"
        @click="$router.push({ name: 'CdnNodeNodeList' })"
      >
        <i-icons-log class="mr-1" />
        节点列表
      </a-button>
      <section class="flex gap-x-4">
        <div
          v-show="error"
          class="flex cursor-pointer gap-x-1 whitespace-nowrap rounded-26px bg-#FFECE8 px-2 py-2px text-xs text-xs/5 text-danger"
          @click="emit('errorClick')"
        >
          <i-icons-error />
          错误：{{ error }}
        </div>
        <div
          v-show="warning"
          class="flex cursor-pointer gap-x-1 whitespace-nowrap rounded-26px bg-#E8F3FF px-2 py-2px text-xs/5 text-primary"
          @click="emit('warningClick')"
        >
          <i-icons-suggest />
          建议：{{ warning }}
        </div>
      </section>
    </div>

    <div class="operation-bar__right ml-4">
      <status-tips />
      <a-button
        class="!text-[#1D2129]"
        type="outline"
        @click="emit('fullscreen')"
      >
        <i-icons-full-screen class="mr-1" />
        全屏
      </a-button>
      <a-button
        type="primary"
        :disabled="isShowOperationActionCard"
        @click="emit('saveConfig')"
      >
        保存配置
      </a-button>
    </div>
  </div>
</template>

<style scoped lang="less">
.operation-bar {
  @apply flex items-center justify-between;
  .default_strong_search {
    max-width: calc(100% - 532px);
  }
  &__left {
    @apply flex items-center gap-x-4;
    .a-button {
      @apply m-0;
    }
  }
  &__right {
    @apply flex items-center gap-x-4;
  }
}
</style>
